<template>
	<div style="width: 100%;height: 100%;">
		<ul class="allul">
			<li v-for="file in tableData" class="itemli">
				<div class="image">
					<img :src="file.imgurl" alt="">
				</div>
				<div class="message">
					<p>{{file.name}}</p>
					<!-- <p>时间： {{file.time}}</p> -->
					<p>文件大小： {{file.size}}</p>
				</div>
				<i class="iconfont iconchenggong3"></i>
			</li>
		</ul>
	</div>
</template>

<script>
	import bus from "@/bus/bus.js"
	export default {
		data() {
			return {
				tableData: [],
			}
		},
		mounted() {
			bus.$on("loadSuccess", (file) => {
				this.loadimgImg(file)
			});
		},
		methods: {

			loadimgImg(file) {
				console.log('success')
				console.log(file)
				let obj = {};
				obj.name = file.name;
				obj.imgurl = file.url
				obj.size = (file.size/1000).toFixed(2) +'kb'
				obj.time = file.time
				this.tableData.unshift(obj)
			}
		},
	}
</script>
<style scoped="scoped">
	.allul{
		padding: 10px 30px;
		margin-top: 20px;
		width: calc(100% - 60px);
	}
	.itemli{
		border-top: 1px solid #d7dded;
		padding: 10px 20px;
		height: 100px;
		position: relative;
		width: calc(100% - 40px);
	}
	.itemli:last-child{
		border-bottom: solid #c2cae4 1px;
	}
	.image {
		float: left;
	}
	.image img {
		width: 150px;
		height: 100px;
		object-fit: cover;
	}
	.message{
		float: left;
		text-align: left;
		margin-left: 20px;
		font-size: 16px;
		color: #00506b;
	}
	.message p{
		margin-top: 10px;
	}
	.iconchenggong3{
		position: absolute;
		right: 40px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40px;
		color: #c2cae4;
	}
</style>
